/**
 * Created by m on 2017/1/24.
 */
var width = document.documentElement.offsetWidth;
var minWidth = 1 / 6 * width;
var maxWidth = 5 / 6 * width;
var height = document.documentElement.offsetHeight;
var minHeight = 1 / 6 * height;
var maxHeight = 5 / 6 * height;
var x;
var y;
var ele = document.querySelector('.bg');
var elefat = document.querySelector('#bf');
var status0,status1;
function change() {
    if(ele.style.backgroundPosition==''){
        status0=status1='center';
    }else{
        status0=ele.style.backgroundPosition.split(' ')[0];
        status1=ele.style.backgroundPosition.split(' ')[1];
    }
    if (x < minWidth && y > maxHeight) {
        ele.style.backgroundPosition = 'bottom left';
        return;
    } else if (x < minWidth && y < minHeight) {
        ele.style.backgroundPosition = 'top left';
        return;
    } else if (x > maxWidth && y < minHeight) {
        ele.style.backgroundPosition ='top right';
        return;
    } else if (x > maxWidth && y > maxHeight) {
        ele.style.backgroundPosition ='bottom right';
        return;
    } else if (y > maxHeight) {
        ele.style.backgroundPosition ='bottom '+status0;
    } else if (y < minHeight) {
        ele.style.backgroundPosition ='top '+status0;
    } else if (x < minWidth) {
        ele.style.backgroundPosition =status1+' left';
    } else if (x > maxWidth) {
        ele.style.backgroundPosition =status1+' right';
    }
}
function position(event) {
//        e =e||window.event;
    x = event.clientX;
    y = event.clientY;
    //console.log('x:' + x + ',y:' + y)
}
document.onmouseover=function() {
    elefat.className='bgScale';
};
document.onmouseout=function() {
    elefat.className='';
};
document.onmousemove = position;
setInterval(change, 100);